style: Fix issues with OSD buttons in light style

- update drawing mixin to account for missing always_dark colors
- fix button in app grid folder not being always dark

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3139>

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 002dc6d22039b7a227e64227f250cea953c6d85b..0997d76aa700fb6ed72a9e8c89b907d7d5ef2c48 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -323,22 +323,22 @@ stage {
 // buttons on OSD elements
 %osd_button {
   @extend %button_common;
-  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color);
-  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
+  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
+  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
+  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
+  &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
+  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
 }
 
 %osd_button_flat {
   @extend %button_common;
-  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);
-  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
-  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
-  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
-  &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
-  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
+  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);
+  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
+  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
+  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
+  &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
+  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
 }
 
 /* System Elements */

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index d206d1c1940a60adb0174df9aed0ad6b5ce1103e..07020ee71177917ce23327517c41d01402c56590 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -172,18 +172,27 @@
     $hover_factor: 7%; // stronger factor in flat style
   }
 
-  // button state background colors
+  // button base state background colors
   $hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
   $active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
   $checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
   $insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
 
+  // button extended state background colors
+  $active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));
+  $checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));
+  $checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));
+
   // override button background colours if element is always dark
   @if $always_dark {
     $hover_button_bg_color: lighten($button_bg_color, $hover_factor);
     $active_button_bg_color: lighten($button_bg_color, $active_factor);
     $checked_button_bg_color: lighten($button_bg_color, $checked_factor);
     $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
+    // extended
+    $active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor);
+    $checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor);
+    $checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
   }
 
   // flat style overrides
@@ -228,7 +237,7 @@
   @else if $type == 'active' {
     color: $tc;
     background-color: $active_button_bg_color;
-    &:hover { background-color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));}
+    &:hover { background-color: $active_hover_button_bg_color;}
     &:focus {
       // otherwise use focus bg color mixin
       $bg: focus_bg_color($active_button_bg_color);
@@ -240,8 +249,8 @@
   @else if $type == 'checked' {
     color: $tc;
     background-color: $checked_button_bg_color;
-    &:hover {background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));}
-    &:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));}
+    &:hover { background-color: $checked_hover_button_bg_color;}
+    &:active { background-color: $checked_active_button_bg_color;}
   }
 
   // insensitive button
@@ -249,7 +258,6 @@
     $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
     color: $insensitive_button_fg_color;
     background-color: $insensitive_button_bg_color;
-    &:hover { background-color: if($variant == 'light', darken($insensitive_button_bg_color, $hover_factor), lighten($insensitive_button_bg_color, $hover_factor));}
 
     // no outline in High Contrast for insensitive buttons
     @if $contrast == 'high' {

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index bdcd98e65af9a81f344eab0b3ebac5f6ed202aa0..fcada18a207ff1c1f5b0b3b270f08419fc3407e6 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -92,10 +92,22 @@ $app_folder_size: 720px;
     }
   }
 
+  & .icon-button {
+    @include button(normal, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);
+    &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);}
+    &:active { @include button(active, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);}
+  }
+
   & .page-indicators {
     margin-bottom: $base_padding * 4;
   }
 
+  & .page-navigation-arrow {
+    @include button(normal, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);
+    &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);}
+    &:active { @include button(active, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);}
+  }
+
   & .overview-tile {
     @include tile_button($bg:$system_overlay_bg_color);
   }
@@ -172,7 +184,7 @@ $page_indicator_size: 10px;
 
   > StIcon { color: $system_fg_color;}
 
-  @include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat);
-  &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat);}
-  &:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat);}
+  @include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);
+  &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);}
+  &:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);}
 }